<template>
    <div class="bar-chart">
		  <chart :options="openclass" ref="openclass" auto-resize/>
    </div>
</template>

<script>
import Echarts from "vue-echarts/components/ECharts";
import "echarts/lib/chart/bar";
import "echarts/lib/chart/line";
import "echarts/lib/component/title";
import 'echarts/lib/component/dataZoom'
let echarts1 = require("echarts/lib/echarts");
export default {
  name: 'barChart',
  components: {
    chart: Echarts
  },
  props: {
    chartData: Object
  },
  data() {
    return {
      items: {},
      openclass: {
          // title: {
          //     text: '',
          //     subtext: ''
          // },
          tooltip: {
              trigger: 'axis',
              axisPointer: {
                  type: 'shadow'
              }
          },
          legend: {
              data: ['']
          },
          grid: {
              left: '2%',
              right: '12%',
              top: '6%',
              bottom: '4%',
              containLabel: true
          },
          xAxis: {
              type: 'value',
              boundaryGap: [0, 0.01],
              axisLine: {//x轴线的样式
        　　　　　　lineStyle: {
        　　　　　　　　type: 'solid',
        　　　　　　　　color: '#ccc',//线的颜色
        　　　　　　　　width:'0'//坐标线的宽度
        　　　　　　}
        　　　　},
              axisLabel:{//字体样式
        　　　　　　show: true,
        　　　　　　textStyle: {
        　　　　　　　　color:'#9B9B9B',
        　　　　　　　　fontWeight : 300 ,
        　　　　　　　　fontSize : 13 //文字的字体大小
        　　　　　　}
        　　　　},
        　　　　axisTick : { //取消刻度线
        　　　　　　show : false
        　　　　}
          },
          yAxis: {
              type: 'category',
              data: [],
              axisLine: {//x轴线的样式
        　　　　　　lineStyle: {
        　　　　　　　　type: 'solid',
        　　　　　　　　color: '#ccc',//线的颜色
        　　　　　　　　width:'1'//坐标线的宽度
        　　　　　　}
        　　　　},
        　　　　axisLabel:{//字体样式
        　　　　　　show: true,
        　　　　　　textStyle: {
        　　　　　　　　color:'#9B9B9B',
        　　　　　　　　fontWeight: 300 ,
        　　　　　　　　fontSize : 14 //文字的字体大小
        　　　　　　}
        　　　　},
        　　　　axisTick : { //取消刻度线
        　　　　　　show : false
        　　　　}
          },
          series: [
              {
                  name: '',
                  type: 'bar',
                  barWidth: 20,
                  data: [],
                  itemStyle: {
                      normal: {
                        color: function(params){
                            var colorList = [
                                ['#2BB1FB', '#6072FF'],
                                ['#53E3D2', '#0AAFFC'],
                                ['#FF80B9', '#DA48D8']
                            ];
                            var index=params.dataIndex;
                            if(params.dataIndex >= colorList.length){
                                    index=params.dataIndex-colorList.length;
                            }
                            return new echarts1.graphic.LinearGradient(0, 0, 1, 0, [
                              {offset: 0, color: colorList[index][0]},
                              {offset: 1, color: colorList[index][1]}
                            ]);
                        },
                        barBorderRadius:[0,10,10,0]
                      }
                  }  
              }
          ]
      }
    };
  },
  created() {},
  methods: {
    setLine() {
      let self = this;
        if (this.items.y.length) {
          this.openclass.yAxis.data = [];
          this.openclass.series[0].data = [];
          this.items.y.length &&
            this.items.y.forEach((item, index) => {
              this.openclass.yAxis.data.push(item);
            });
          this.items.data.length &&
            this.items.data.forEach((item, index) => {
              this.openclass.series[0].data.push(item);
            });
        } else {
          this.$refs.openclass.clear();
        }
    }
  },
  watch: {
      chartData:{
        immediate: true,
        handler(val){
          this.items = val;
          this.$nextTick(() => {
                this.setLine();
           });
        }
      }
  },
  mounted () {
    this.items = this.chartData;
    this.$nextTick(() => {
      this.setLine();
    })
  }
};
</script>

<style lang="scss">
.bar-chart {
  height: 310px;
  margin: 0;

  .echarts {
    width: 100%;
    height: 100%;
  }
  .bold {
    font-weight: bold;
    line-height: 18px;
  }
}
</style>
